<template>
	<!------------------------------------ 商品列表 ------------------------------------
    @desc 包含商品管理列表，快速下单商品列表，核销商品列表
    @author kyle
    @date 2021-03-05
    @props
      productList  ———— 商品列表数据
      purchaseList ———— 供应商列表
      listType     ———— 列表类型
      sortable     ———— 是否可排序
      typeObj      ———— 采购下单搜索type
    @method
      editDetail    ———— 编辑商品
      goDetail      ———— 进入详情
      showSpec      ———— 显示规格弹窗
      updateCart    ———— 更新购物车
  -->
	<div>
		<div v-show="!sortable">
			<!-- 快速下单页面列表 -->
			<ul v-if="listType === 'quickPlaceOrder'">
				<li v-for="(item, index) in productList" :key="index" class="bg-white productItem"
					>
					<!-- @click="goDetailPage(item, index)" -->
					<div class="flex">
						<img-box class="is-130 br-10 flex-s-0" :img-url="item.ThumbnailUrl410" />
						<div class="productItem-detail ml-20 flex-1">
							<p class="text-show-line-2 fs-28 fw-b">{{ item.ProductName }}</p>
							<p v-show="!item.ProductSkuAttrList && item.ProductSkuList && item.ProductSkuList[0].AttributeNameValue"
								class="color-gray-light fs-20 mt-10">
								{{ item.ProductSkuList[0].AttributeNameValue }}
							</p>
							<p v-if="(item.UnitList && item.UnitList.length > 1) || (item.ProductSkuList && item.ProductSkuList.length > 1)"
								class="color-gray-light fs-20 mt-10">
								<!-- <span v-if="switch85 == 1">
									<span
										v-if="item.UnitList && item.UnitList.length > 1 && item.BaseUnit != item.DefaultUnit && item.UnitList.length - 1 > 1">{{
											item.UnitList.length
											- 1 }}个单位 {{ (item.ProductSkuList && item.ProductSkuList.length > 1) ? '' : '可选' }}</span>
									<span v-if="item.UnitList && item.UnitList.length > 1 && item.BaseUnit == item.DefaultUnit">{{
										item.UnitList.length }}个单位
										{{ (item.ProductSkuList && item.ProductSkuList.length > 1) ? '' : '可选' }}</span>
								</span>
								<span v-else>
									<span v-if="item.UnitList && item.UnitList.length > 1">{{ item.UnitList.length }}个单位
										{{ (item.ProductSkuList && item.ProductSkuList.length > 1) ? '' : '可选' }}</span>
								</span> -->
								<span v-if="item.ProductSkuList && item.ProductSkuList.length > 1">{{ item.ProductSkuList.length }}个规格
									可选</span>
							</p>
							<p v-if="item.StockStr" class="color-primary fs-20 mt-10">{{ item.StockStr }}</p>
							<div v-if="item.SaleStatus != 0" class="color-primary flex-s-c fs-32 mt-10 fw-b left-money">
								<p>{{ item.V_GradePrice}}<span class="color-gray-light fs-20 fw-500"> / {{ item.BaseUnit ? item.BaseUnit : item.Unit }}</span></p>
								<div class="w-50 flex pr-25"><van-checkbox :name="item.ID" v-model="item.selectAll"  @click="checkEdit(item)" /></div>

							</div>
					
							<!-- <a v-if="item.SaleStatus==1" :href="'tel:'" class="productItem-p-right tel-text">电话咨询</a> -->
							<div v-if="item.SaleStatus == 1">
								<!-- 单规格加购 -->
								<!-- <div
									v-show="item.ProductSkuAttrList && item.ProductSkuAttrList.length <= 1 && !item.UnitList && item.IsFutures !== 3"
									class="productItem-p-right flex-fe-c">
									<svg-icon v-show="item.Amount > 0" icon-class="delete-3" class="color-primary fs-42"
										:class="item.Amount <= 0 ? 'opacity-1' : ''"
										@goPage="changeAmount(item, item.Amount, item.V_StockSum, -1, item.MinNum, 1, item.oLimitBuy, item.AddNum)" />
									<div v-show="item.Amount > 0" class="btn-input-box">
										<input v-model="item.Amount" type="number" class="btn-input"
											@blur="changeAmount(item, item.Amount, item.V_StockSum, 0, item.MinNum, 1, item.oLimitBuy, item.AddNum)"
											@click.stop>
									</div>
									<svg-icon icon-class="add-1" class="color-primary fs-42"
										:class="(item.Amount >= item.V_StockSum && switch7 !== 1) || (item.Amount >= item.oLimitBuy && item.oLimitBuy > 0) ? 'opacity-1' : ''"
										@goPage="changeAmount(item, item.Amount, item.V_StockSum, 1, item.MinNum, 1, item.oLimitBuy, item.AddNum)" />
								</div> -->
								<!-- 多规格加购 -->
								<!-- <div v-show="(item.ProductAttributesList && item.ProductAttributesList.length >= 1) || item.UnitList"
									class="productItem-p-right flex-fe-c">
									<svg-icon icon-class="add-1" class="color-primary fs-42" @goPage="showSpec(item, index)" />
								</div> -->
							</div>
						</div>
					</div>
					<div v-if="item.ProductSkuList && item.ProductSkuList.length > 1">
						<div class="flex product" v-for="(sitem,index) in item.ProductSkuList"  :key="index">
								<div class="color-primary flex-s-c fs-32 mt-10 fw-b flex-1">
									<p class="fs-28 color-gray-light">{{sitem.AttributeNameValue}}<span class="color-primary fw-b">¥{{ sitem.V_GradePrice}}</span></p>
									<div class="w-50 flex pr-25"><van-checkbox :name="sitem.ID" v-model="sitem.isSelected"  @click="handleCheckboxChanged(item)" /></div>
								</div>
						</div>
					</div>
				</li>
			</ul>

		</div>
	</div>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
	name: 'ProductList',
	components: {
		imgBox
	},
	props: {
		productList: {
			type: Array,
			required: true
		},
		purchaseList: {
			type: Array,
			required: false,
			default: function () {
				return []
			}
		},
		listType: {
			type: String,
			required: true
		},
		sortable: {
			type: Boolean,
			default: false
		},
		showTab: {
			type: Boolean,
			default: false
		},
		typeObj: {
			type: Object,
			required: false,
			default: function () {
				return {}
			}
		},
		switch85: {
			type: Number,
			required: false,
			default: 0
		},
		switch7: {
			type: Number,
			required: false,
			default: 0
		},
		artificer: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			itemActiveIndex: 0,
			checkedList:[],
			productNameList:[],
			productNameList1:[],
			selectAll:false
		}
	},
	computed: {},
	created() {
		
	},
	mounted() {
		if(localStorage.getItem('customerProductList')){
			this.checkedList = JSON.parse(localStorage.getItem('customerProductList'));
			this.productNameList = this.checkedList
		}
		console.log(this.productList)
		
		
  },
	methods: {
		handleCheckboxChanged(item){
			console.log(item.ProductSkuList)
			item.selectAll = item.ProductSkuList.every(sitem => sitem.isSelected);
			console.log(item.selectAll)
			this.$forceUpdate()
		},
		checkEdit(item){
			item.ProductSkuList.forEach(sitem => {
				sitem.isSelected = item.selectAll;
			});

			// if(this.productNameList.indexOf(item.ID) === -1){
			// 	this.productNameList.push(item.ID)
			// }else{
			// 	this.productNameList.splice(this.productNameList.indexOf(item.ID),1)
			// }
			// console.log(this.productNameList)
			// localStorage.setItem('customerProductList', JSON.stringify(this.productNameList));
		},   
		// 编辑商品
		editDetail(id) {
			console.log(this.type)
			this.$emit('editDetail', id)
		},
		// 进入详情
		goDetail(id) {
			this.$emit('goDetail', id)
		},
		// 加减
		changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, AddNum) {
			const _oldAmount = item.Amount
			this.$utils.changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, this.switch7, AddNum)
			if (_oldAmount !== item.Amount || type === 0) {
				this.$emit('updateCart', item)
			}
		},
		// 显示规格弹窗
		showSpec(item, index) {
			this.$emit('showSpec', item, index)
		},
		// 进入商品详情
		goDetailPage(item, index) {
			console.log('item', item)
			this.$emit('goDetailPage', item, index)
		},
		// 切换显示效果
		changeItem(index) {
			this.itemActiveIndex = index
			this.$emit('changeItem', index)
		},
		gotoSupplier(id) {
			this.$router.push('/purchase/StoreHome/' + id)
		},
		gotoSupplierProduct(id) {
			const _obj = {
				type: this.typeObj.type,
				typePath: this.typeObj.typePath,
				purchaseMemberId: id
			}
			this.$router.push('/purchase/StoreSearchList/' + JSON.stringify(_obj))
		}
	}
}
</script>

<style lang="scss" scoped>
.list-item {
	flex: 1;
	font-size: 24px;
	line-height: 70px;
}

.list-item-active {
	background: $colorF;
	position: relative;

	&:before {
		content: '';
		position: absolute;
		width: 40px;
		height: 4px;
		bottom: 10px;
		left: calc(50% - 20px);
		@include bg-primary;
		border-radius: 2px;
	}
}

.left-active {
	border-top-right-radius: 10px;

	&:after {
		content: '';
		position: absolute;
		right: -26px;
		top: 0;
		width: 0;
		height: 0;
		border-right: 30px solid transparent;
		border-bottom: 70px solid $colorF;
	}
}

.right-active {
	border-top-left-radius: 10px;

	&:after {
		content: '';
		position: absolute;
		left: -26px;
		top: 0;
		width: 0;
		height: 0;
		border-left: 30px solid transparent;
		border-bottom: 70px solid $colorF;
	}
}

.productItem {
	padding: 32px 22px;
	position: relative;
	z-index: 1;

	&:not(:last-child) {
		margin-bottom: 2px;
	}

	.right-arrow {
		position: relative;

		&:after {
			content: '';
			position: absolute;
			top: 40px;
			right: 0;
			width: 20px;
			height: 20px;
			border: 2px solid;
			border-color: $colorC $colorC transparent transparent;
			transform: rotate(45deg);
		}
	}

	.item-store {
		width: 170px;
		margin-right: 40px;

		.item-store-btn {
			position: relative;
			margin: 20px auto 0;
			font-size: 20px;
			line-height: 34px;
			border-radius: 17px;
			padding: 0 30px 0 20px;
			@include color-primary;
			display: inline-block;
			border: 1px solid currentColor;

			&:after {
				content: '';
				position: absolute;
				top: 8px;
				right: 15px;
				width: 10px;
				height: 10px;
				border: 2px solid;
				border-color: currentColor currentColor transparent transparent;
				transform: rotate(45deg);
			}
		}
	}

	.item-product {
		margin-right: 10px;
		display: none;

		&:first-child,
		&:nth-child(2) {
			display: block;
		}
	}
}

.productItem-1 {
	padding: 0 22px;
	margin-top: 32px;
}

.sortable-chosen {
	box-shadow: 0 0 20px #ccc;
	z-index: 2;
	margin: 0 4px;
}

.left-money {
	padding-left: 16px;
	position: relative;

	&:before {
		content: '￥';
		position: absolute;
		bottom: 4px;
		font-size: 24px;
		font-weight: 500;
		left: -4px;
	}
}

.productItem-detail {
	padding-bottom: 10px;
	position: relative;

	.productItem-p-left {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.productItem-p-right {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.tel-text {
		color: $colorF;
		@include bg-primary;
		padding: 10px 20px;
		border-radius: 28px;
	}

	.select-box {
		display: inline-block;
		position: relative;
		padding: 0 36px 0 13px;
		line-height: 30px;
		font-size: 20px;
		border-radius: 15px;
		border: 1px solid currentColor;

		&:after {
			content: '';
			position: absolute;
			width: 10px;
			height: 10px;
			top: 5px;
			right: 10px;
			border: 1px solid;
			border-color: transparent currentColor currentColor transparent;
			transform: rotate(45deg);
		}

		.select-item-box {
			position: absolute;
			left: 0;
			color: $color3;
			width: auto;
			background: rgba(0, 0, 0, 0.1);
			z-index: 100;

			p {
				padding-left: 13px;
			}
		}
	}
}

.upDown-box {
	position: absolute;
	bottom: 32px;
	right: 22px;
	width: 110px;
	height: 40px;

	.up {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.down {
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

.btn-input-box {
	position: relative;
	margin: 0 4px;

	&:before {
		background: transparent;
	}

	.btn-input {
		position: relative;
		z-index: 1;
		height: 42px;
		width: 50px;
		line-height: 1;
		border: none;
		text-align: center;
	}
}

.bottom-popup {
	border-radius: 40px 40px 0 0;
}
</style>
